import React from "react";
import { useState } from "react";
import A from "./A";
import B from "./B";
import C from "./C";

export default function DiffCom() {
  let [count, setCount] = useState(100);

  return (
    <div style={{ padding: 50 }}>
      <h1>{count}</h1>

      <h3>不同类型元素的处理</h3>
      {count % 2 ? <span>iloveyou</span> : <p>imissyou</p>}

      <h3>不同类型的组件</h3>
      {count % 2 ? <A /> : <B />}

      <h3>相同类型元素的处理</h3>
      {count % 2 ? <p name="lining">ABC</p> : <p name="wupeng">ABC</p>}

      <h3>相同类型组件的处理</h3>
      {count % 2 ? <C name="wangmiao" /> : <C name="xudong" />}

      <h3>列表组件的处理</h3>
      {count % 2 ? (
        <ul>
          <li key="1">first</li>
          <li key="2">second</li>
        </ul>
      ) : (
        <ul>
          <li key="3">third</li>
          <li key="1">first</li>
          <li key="2">second</li>
        </ul>
      )}

      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点击新增
      </button>
    </div>
  );
}
